<template>
  <div class="home-container">
    <!-- <div class="home-text">name:{{ name }}</div>
    <div class="home-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div> -->
    <div class="titleContent">
      <div class="dataItem">
        <div class="itemSvg"><svg-icon icon-class="remember" class="homeIcon"/></div>
        <div class="dataText">
          <p class="dataFir">35200</p>
          <p class="dataSec">总会员数</p>
        </div>
      </div>
      <div class="dataItem">
        <div class="itemSvg"><svg-icon icon-class="record" class="homeIcon"/></div>
        <div class="dataText">
          <p class="dataFir">219390</p>
          <p class="dataSec">总访问数</p>
        </div>
      </div>
      <div class="dataItem">
        <div class="itemSvg"><svg-icon icon-class="order" class="homeIcon"/></div>
        <div class="dataText">
          <p class="dataFir">32143</p>
          <p class="dataSec">总订单数</p>
        </div>
      </div>
      <div class="dataItem">
        <div class="itemSvg"><svg-icon icon-class="money" class="homeIcon"/></div>
        <div class="dataText">
          <p class="dataFir">174880</p>
          <p class="dataSec">总金额</p>
        </div>
      </div>
    </div>
    <div class="mychartContent">
      <div id="myChart">
      </div>
    </div>
  </div>
</template>

<script>
// 主页面板
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    /* eslint-disable */
    initCharts () {
      var dataMap = {};
      function dataFormatter(obj) {
        var pList = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
        var temp;
        for (var year = 2002; year <= 2011; year++) {
            var max = 0;
            var sum = 0;
            temp = obj[year];
            for (var i = 0, l = temp.length; i < l; i++) {
              max = Math.max(max, temp[i]);
              sum += temp[i];
              obj[year][i] = {
                name : pList[i],
                value : temp[i]
              }
            }
            obj[year + 'max'] = Math.floor(max / 100) * 100;
            obj[year + 'sum'] = sum;
        }
        return obj;
      }

      dataMap.dataPI = dataFormatter({
          //max : 4000,
          2011:[136.27,159.72,2905.73,641.42,1306.3,1915.57,1277.44,1701.5,124.94,3064.78,1583.04,2015.31],
          2010:[124.36,145.58,2562.81,554.48,1095.28,1631.08,1050.15,1302.9,114.15,2540.1,1360.56,1729.02],
          2009:[118.29,128.85,2207.34,477.59,929.6,1414.9,980.57,1154.33,113.82,2261.86,1163.08,1495.45],
          2008:[112.83,122.58,2034.59,313.58,907.95,1302.02,916.72,1088.94,111.8,2100.11,1095.96,1418.09],
          2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31,986.02,1200.18],
          2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1,1011.03],
          2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83,966.5],
          2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1,950.5],
          2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85,749.4],
          2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44,685.2,783.66]
      })

      dataMap.dataSI = dataFormatter({
          //max : 26600,
          2011:[3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58,8309.38],
          2010:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93,6436.62],
          2009:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49,4905.22],
          2008:[2626.41,3709.78,8701.34,4242.36,4376.19,7158.84,3097.12,4319.75,6085.84,16993.34,11567.42,4198.93],
          2007:[2509.4,2892.53,7201.88,3454.49,3193.67,5544.14,2475.45,3695.58,5571.06,14471.26,10154.25,3370.96],
          2006:[2191.43,2457.08,6110.43,2755.66,2374.96,4566.83,1915.29,3365.31,4969.95,12282.89,8511.51,2711.18],
          2005:[2026.51,2135.07,5271.57,2357.04,1773.21,3869.4,1580.83,2971.68,4381.2,10524.96,7164.75,2245.9],
          2004:[1853.58,1685.93,4301.73,1919.4,1248.27,3061.62,1329.68,2487.04,3892.12,8437.99,6250.38,1844.9],
          2003:[1487.15,1337.31,3417.56,1463.38,967.49,2898.89,1098.37,2084.7,3209.02,6787.11,5096.38,1535.29],
          2002:[1249.99,1069.08,2911.69,1134.31,754.78,2609.85,943.49,1843.6,2622.45,5604.49,4090.48,1337.04]
      })

      let myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        baseOption: {
          timeline: {
            bottom: '10',
            padding: 5,
            axisType: 'category',
            autoPlay: true,
            playInterval: 1000,
            data: [
              '2002-01-01','2003-01-01','2004-01-01', '2006-01-01', '2007-01-01','2008-01-01','2009-01-01','2010-01-01',
            ],
            label: {
              formatter : function(s) {
                return (new Date(s)).getFullYear();
              }
            },
            symbol: 'image://',
            symbolSize: '10',
            lineStyle: {
              color: '#999',
              width: 1,
              opacity: 0.4
            },
            controlStyle: {
              show: false
            },
            checkpointStyle: {
              symbol: 'diamond',
              symbolSize: 8,
              color: 'red'
            }
          },
          tooltip: {},
          legend: {
            pageIconSize: 5,
            align: 'right',
            right: '8%',
            data: ['售单', '租单']
          },
          calculable : true,
          grid: {
            top: 80,
            right: '8%',
            bottom: 90,
            left: '8%',
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              'type':'category',
              'axisLabel':{'interval': 0},
              'data':[
                '1月','2月','3月','4月','5月','6月','7月','8月',
                '9月','10月','11月','12月'
              ],
              splitLine: {show: false}
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '业绩（元）',
              splitLine: {
                lineStyle: {
                  color: ['#F5F5F5'],
                  dotted: 'dotted'
                },
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {name: '售单', type: 'bar'},
            {name: '租单', type: 'bar'}
          ],
          color: ['#FF0005', '#49A9EE', '#FFD86E', '#bda29a','#6e7074', '#546570', '#c4ccd3']
        },
        options: [
          {
            series: [
              {data: dataMap.dataPI['2002']},
              {data: dataMap.dataSI['2002']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2003']},
              {data: dataMap.dataSI['2003']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2004']},
              {data: dataMap.dataSI['2004']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2005']},
              {data: dataMap.dataSI['2005']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2006']},
              {data: dataMap.dataSI['2006']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2007']},
              {data: dataMap.dataSI['2007']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2008']},
              {data: dataMap.dataSI['2008']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2009']},
              {data: dataMap.dataSI['2009']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2010']},
              {data: dataMap.dataSI['2010']}
            ]
          },
          {
            series : [
              {data: dataMap.dataPI['2011']},
              {data: dataMap.dataSI['2011']}
            ]
          }
        ]
      })
    },
    /* eslint-disable */
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      // const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      // myChart.setOption({
      //   title: { text: '堆叠条形图' },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   legend: {
      //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      //   },
      //   series: [{
      //     name: '直接访问',
      //     type: 'bar',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'insideRight'
      //       }
      //     },
      //     data: [320, 302, 301, 334, 390, 330, 320]
      //   },
      //   {
      //     name: '邮件营销',
      //     type: 'bar',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'insideRight'
      //       }
      //     },
      //     data: [120, 132, 101, 134, 90, 230, 210]
      //   },
      //   {
      //     name: '联盟广告',
      //     type: 'bar',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'insideRight'
      //       }
      //     },
      //     data: [220, 182, 191, 234, 290, 330, 310]
      //   },
      //   {
      //     name: '视频广告',
      //     type: 'bar',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'insideRight'
      //       }
      //     },
      //     data: [150, 212, 201, 154, 190, 330, 410]
      //   },
      //   {
      //     name: '搜索引擎',
      //     type: 'bar',
      //     stack: '总量',
      //     label: {
      //       normal: {
      //         show: true,
      //         position: 'insideRight'
      //       }
      //     },
      //     data: [820, 832, 901, 934, 1290, 1330, 1320]
      //   }]
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/variables.scss";
.home {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.home-container {
  background-color: white;
  padding: 20px 10px;
  .titleContent {
    display: flex;
    justify-content: space-around;
    .dataItem {
      display: flex;
      .itemSvg {
        .homeIcon {
          width: 60px;
          height: 60px;
        }
      }
      .dataText {
        margin-top: -5px;
        margin-left: 5px;
        .dataFir {
          font-size: 16px;
          font-weight: bold;
        }
        .dataSec {
          font-size: 12px;
          margin-top: -10px;
        }
      }
    }
  }
  .mychartContent {
    margin-top: 50px;
    #myChart {
      width: auto;
      height: 400px;
    }
  }
}
</style>
